<template>
	<view class="content">
		<tab-select :tab_link="tab_link" @change="link_change" :cindex="tab_index" :img_width="30"></tab-select>
		<view class="row clnr"  v-for="(item,index) in orderList" :key="index" @click="$public.navTo('account/account_cljdxq?feedbackId=' + item.feedbackId)">
			<view class="col-24">
				<view class="row clnrkt">
					<view class="pdl-1 col-7 t_size_bold">
						{{item.serviceTypeTitle}}
					</view>
					<view class="col-15 t_right pdr-1">
						{{item.createTime}} <text class="iconfont icon-youjiantou"></text>
					</view>
				</view>
				<view class="clnrxq row">
					<view class="col-3">
						<view class="col-24 t_size_bold t_center ycsj">
							·
						</view>
						<view class="slh">
							
						</view>
						<view class="col-24 t_size_bold t_center ycqd">
							·
						</view>
						<view class="slh">
							
						</view>
						<view class="col-24 t_size_bold t_center yczd">
							·
						</view>
					</view>
					<view class="col-21">
						<view class="col-24 ycsj">
							约车 {{item.orderCreateTime}}
						</view>
						<view class="col-24 ycqd">
							{{item.getOnPoint}}
						</view>
						<view class="col-24 yczd">
							{{item.getOffPoint}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import tab_select from '@/components/trip/tab_select.vue'	
	export default {
		components:{
			"tab-select": tab_select
		},
		data(){
			return{
				tab_link: [{
					id: 0,
					name: '处理中'
				},
				{
					id: 1,
					name: '已完成'
				}],
				tab_index: 0,
				objPage: {
					pageNum: 1,
					pageSize: 10,
					feedbackState: 0
				},
				orderList: [],
				loading: true
			}
		},
		onLoad() {
			this.load();
		},
		onReachBottom() {
			this.objPage.pageNum += 1;
			this.load();
		},
		watch:{
			tab_index(){
				this.loading = true;
				this.orderList = [];
				this.objPage.pageNum = 1;
				this.load();
			}
		},
		methods:{
			async load(){
				if(!this.loading){
					return
				}
				this.objPage.feedbackState = this.tab_link[this.tab_index].id;
				let res = await this.$api.request(this.$api.customer.feedback_list,this.objPage);
				if(res){
					this.orderList = this.orderList.concat(res.list);
					if(this.objPage.pageSize != res.size){
						this.loading = false;
					}
				}
			},
			link_change(e){
				this.tab_index = e;
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #f5f5f5;
	}
	.clnr{
		width: 92%;
		margin: 0 4%;
		background-color: #FFFFFF;
		margin-top: 30rpx;
		border-radius: 10rpx;
		.clnrkt{
			height: 96rpx;
			line-height: 96rpx;
			color: #333333;
			border-bottom: 1px solid #ededed;
			.t_size_bold{
				overflow: hidden;
			}
			.col-15{
				color: #B3B3B3;
			}
		}
		.clnrxq{
			padding: 45rpx 0;
			.col-3{
				.slh{
					width: 1px;
					height: 40rpx;
					border-left: 1px dotted #999999;
					margin: 0 calc((100% - 1px) / 2);
				}
				.col-24{
					height: 15rpx;
					line-height: 15rpx;
					font-size: 45rpx;
				}
				.ycsj{
					color: #FFAE00;
				}
				.ycqd{
					color: #6CBF30;
				}
				.yczd{
					color: #07B0FF;
				}
			}
			.col-21{
				color: #333333;
				.ycsj{
					height: 30rpx;
					line-height: 15rpx;
				}
				.ycqd{
					height: 60rpx;
					line-height: 60rpx;
				}
				.yczd{
					height: 50rpx;
					line-height: 50rpx;
				}
			}
		}
	}
</style>
